<template>
    <view class="repair-main">
      <view style="display: flex;justify-content: space-around;width: 720rpx;margin-top: 15rpx;">
        <text v-if="picker == 100" class="head-nav-picker">全部</text>
        <text v-else class="head-nav" @click="fitter(100)">全部</text>
        <text v-if="picker == 1" class="head-nav-picker">接车</text>
        <text v-else class="head-nav" @click="fitter(1)">接车</text>
        <text v-if="picker == 2" class="head-nav-picker">在修</text>
        <text v-else class="head-nav" @click="fitter(2)">在修</text>
        <text v-if="picker == 3" class="head-nav-picker">完工</text>
        <text v-else class="head-nav" @click="fitter(3)">完工</text>
        <text v-if="picker == 4" class="head-nav-picker">审核</text>
        <text v-else class="head-nav" @click="fitter(4)">审核</text>
        <text v-if="picker == 5" class="head-nav-picker">结算</text>
        <text v-else class="head-nav" @click="fitter(5)">结算</text>
      </view>
      <view style="display: flex;justify-content: space-between;">
        <view class="search-box">
            <view>
              <icon style="position: relative;top: 13rpx;left: 18rpx;" type="search" size="20"></icon>
            </view>
            <view>
              <input class="search" confirm-type="search" placeholder="输入信息进行查找" />
            </view>
        </view>
        <view>
          <image style="width: 40rpx;height: 60rpx;position: relative;right: 20rpx;top: 10rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_3.png"></image>
        </view>
      </view>
      <scroll-view 
        refresher-enabled="true"
        style="height: 1250rpx;" 
        :scroll-y="true" 
        @scrolltolower="test"
        :refresher-triggered="isRefresh"
        @refresherrefresh="refresh">
        <view v-for="(item,index) in data" class="truck-info-cord" @click="detailedInfo(item.id)" :key="index">
          <view>
            <view style="line-height: 40rpx;">
              <text style="font-size: 28rpx;font-weight: 400;text-align: left;">单号：{{item.orderNo}}</text>
              <text style="font-size: 24rpx;font-weight: 600;float: right;">修理厂：{{item.siteName}}</text>
            </view>
            <view>
              <image style="height: 15rpx;width: 100%;" :src="type[item.orderStatus]"></image>
            </view>
            <view style="line-height: 66rpx;margin-top: 10rpx;">
              <text class="truck-number">{{item.plateNo}}</text>
              <text style="float: right;font-size: 24rpx;">{{item.createTime}}</text>
            </view>
            <view style="margin-top: 10rpx;">
              <view style="float: left;width: 530rpx;overflow: hidden;">
                <view class="pices-message">
                  <image class="pices-message-logo" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo10.png"></image>
                  <text style="margin-left: 24rpx;">{{item.outgoingNo}}</text>
                </view>
                <view class="pices-message">
                  <image class="pices-message-logo" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo11.png"></image>
                  <text style="margin-left: 24rpx;">{{item.companyName}}</text>
                </view>
                <view class="pices-message">
                  <image class="pices-message-logo" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo13.png"></image>
                  <text style="margin-left: 24rpx;">{{item.phone}}</text>
                </view>
              </view>
              <view style="float: right;margin-right: 40rpx;margin-top: 14rpx;">
                <image style="width: 60rpx;height: 100rpx;" :src="status[item.orderStatus]"></image>
              </view>
            </view>
          </view>
        </view>
        <uni-load-more v-if="loading" :status="isLoading"></uni-load-more>
      </scroll-view>
      
    </view>
</template>
<script>
  import {getList} from '@/api/global'
  import {tokenExpire} from '@/api/token'
  export default {
    data() {
      return {
        picker:100,
        loading:true,
        data:[],
        sum:5,
        lastLen:0,
        nowLen:0,
        isRefresh:false,
        isLoading:'loading',
        status:[
          '',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/ordertype_jieche2.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/ordertype_zaixiu.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/ordertype_wangong2.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/ordertype_shenhe2.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/ordertype_jiesuan.png',
        ],
        type:[
          '',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo_29.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo_27.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo_28.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo_26.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo_24.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo_24.png',
        ]
      }
    },
    mounted() {
      this.load();
      // console.log(this.sum)
    },
    onReachBottom() {
      console.log(1)
    },
    methods:{
      load:function() {
        var that = this;
      
        getList({orderStatus:that.picker,pageNum:that.sum,pageSize:1,sort:1}).then(response => {
          var _data = response[1].data;
            // console.log(response)
          if(_data.status == 200) {
            that.data = _data.data;
            that.lastLen = that.nowLen;
            that.nowLen = _data.data.length;
            that.isRefresh = false;
            if(that.lastLen == that.nowLen) {
              that.isLoading = 'noMore';
            }else {
              that.isLoading = 'loading'
            }
          }else {
            that.isLoading = 'noMore';
            tokenExpire();
          }
        }).catch(error => {
          console.log(error);
        })
      },
      detailedInfo:function(key){
        // console.log(key)
        
        uni.navigateTo({
            url: '/pages/repair/settlement/settlement?id=' + key
        });
      },
      test:function(){
        this.sum = this.sum + 5;
        this.load();
      },
      aaa(e){
        // console.log(e.detail.scrollTop)
      },
      fitter:function(key) {
        console.log(key)
        this.sum = 5;
        this.data = [];
        this.isLoading = 'loading';
        this.picker = key;
        this.load();
      },
      refresh:function() {
        var that = this;
        this.isRefresh = true;
        this.sum = 5;
        this.load();
      }
    }
  }
</script>
<style lang="css" scoped>
  .repair-main {
    height: 100%;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .truck-info-cord {
    width: 680rpx;
    height: 330rpx;
    margin-top: 15rpx;
    margin-left: 15rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 10rpx 0 rgba(0, 0, 0, 0.2);
    padding: 20rpx;
    color: rgba(51, 51, 51, 1);
  }

  .head-nav {
    font-size: 32rpx;
    line-height: 44rpx;
    font-weight: 400;
    display: inline-block;
    width: 72rpx;
  }
  
  .head-nav-picker {
    font-size: 36rpx;
    color: rgba(250, 140, 22, 1);
    font-weight: 550;
    line-height: 44rpx;
    display: inline-block;
    width: 72rpx;
  }
  
  .search-box {
    background-color: rgba(246, 247, 248, 1);
    height: 60rpx;
    width: 660rpx;
    border-radius: 16rpx;
    margin-left: 15rpx;
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
  }
  .search {
    height: 100%;
    width: 580rpx;
    line-height: 60rpx;
    font-size: 20rpx;
  }
  .truck-number {
    font-size: 48rpx;
    height: 66rpx;
    font-weight: 500;
    width: 350rpx;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
  }
  .pices-message {
    line-height: 34rpx;
    font-size: 24rpx;
    margin-bottom: 14rpx;
    white-space: nowrap;
  }
  .pices-message-logo {
    width: 30rpx;
    height: 30rpx;
    position: relative;
    top: 7rpx;
  }
</style>
